.<template>
  <ul class="todo-main">
       <TransitionGroup name="todo" appear>
        <MyItem  
      v-for="todoObj in todos" :key="todoObj.id" :todo="todoObj" 
      :checkTodo="checkTodo" :deleteTodo="deleteTodo"
      />
       </TransitionGroup>
  </ul>
</template>

<script>
import MyItem from './MyItem'
export default {
  name:'MyList',
  components:{MyItem},
  props:['todos','checkTodo','deleteTodo']
}
</script>

<style>
.todo-enter-active{
    animation: tx .5s linear;
  }
  .todo-leave-active{
    animation: tx .5s reverse linear;
  }
  @keyframes tx {
    from{
      transform: translateX(100%);
    }
    to{
      transform: translateX(0);
    }
  }
</style>